<template>
    <div class="traningpart">
      <ul v-model="this.$store.state.course_info">
        <li v-for="(item,index) in this.$store.state.course_info" @click="get_video(item.video_name)"><button>{{index+1}}</button><span>{{item.video_name}}</span>
          <img :src="item.picture" alt="">
        </li>
      </ul>
    </div>
</template>

<script>
    export default {
        name: "TraningPart",
      data(){
          return{
            info:""
          }
      },
      methods:{
          get_video:function (video) {
            var this_=this
            console.log(video);
            this_.$axios.get('http://127.0.0.1:8080/dongzuo/getvideo_byname',{params: {
                video_name: video
              }})
              .then(function (response) {
                console.log(response.data[0]);
                this_.$store.state.video_info=response.data[0]

              })
          }
      }

    }
</script>

<style scoped>
  li{
    height: 100px;
    margin-bottom: 2px;
    background: white;
  }
  img{
    float: right;
    height: 100%;
    width: 170px;
  }
  button{
    cursor: pointer;
    width: 50px;
    height: 50px;
    background: #1427e6;
    border: none;
    outline: none;
    font-size: 25px;
    color: white;
    opacity: 0.8;
  }
  button:hover{
    opacity: 1;
  }
  span{
    font-size: 25px;
    margin-left: 20px;
    cursor: pointer;
  }
</style>
